<template>
  <div class="goodsInfo">
    <div class="c-banner">
      <img src="../../../public/images/logo.svg" alt="" />
      <img src="../../../public/images/classify/classify-search.svg" alt="" />
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in goodsInfo.images">
        <img :src="item.fullUrl" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="cc-price">
      <h3 class="lowerPrice" v-if="tags[0]">
        {{ tags[0].name }}
      </h3>
      <h3 class="title">{{ goodsInfo.name }}</h3>
      <h4>{{ goodsInfo.fullDescription }}</h4>
      <div class="sallDate" v-if="price.validFromDate">
        <h4>优惠有效期</h4>
        <h4>{{ price.validFromDate }}-{{ price.validToDate }}</h4>
      </div>
      <div class="priceText" :class="{ breathTaking: price.breathTaking }">
        <span class="price-min">￥</span>
        <span class="price-max">{{
          Number(specialPrice ? specialPrice : regularPrice)
            .toFixed(2)
            .toString()
            .replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,")
            .split(".")[0]
        }}</span>
        <span class="price-min"
          >.{{
            Number(specialPrice ? specialPrice : regularPrice)
              .toFixed(2)
              .toString()
              .replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,")
              .split(".")[1]
          }}</span
        >
        <s v-if="specialPrice"
          >￥{{
            Number(regularPrice)
              .toFixed(2)
              .toString()
              .replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,")
          }}</s
        >
      </div>
    </div>
    <div class="description">
      {{ goodsInfo.benefitSummary }}
    </div>
    <div class="g-serve">
      <img src="../../../public/images/classify/classify-serve.png" alt="" />
    </div>
    <div class="destination"></div>
    <transition name="van-slide-up">
        <div v-show="visible&&isCollection" class="collectionTip">商品收藏成功</div>
    </transition>
    <transition name="van-slide-up">
         <div v-show="unvisible&&!isCollection" class="collectionTip">已取消收藏</div>
    </transition>
    <div class="goodsInfo-bottom">
      <div class="server">
        <svg
          data-v-07814981=""
          data-v-1cbf7c4e=""
          fill="none"
          viewBox="0 0 24 25"
          height="25"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
          class="svg-icon"
        >
          <path
            xmlns="http://www.w3.org/2000/svg"
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M4.61719 17.5201H5.52344C5.64844 17.5201 5.72656 17.4339 5.72656 17.2959V12.1906C5.72656 8.12877 8.53906 5.50712 12.4766 5.50712C16.4141 5.50712 19.2266 8.12877 19.2266 12.1906V17.2959C19.2266 17.4339 19.3047 17.5201 19.4297 17.5201H20.3438C20.6953 17.5201 20.9609 17.2701 20.9609 16.8992V11.7422C20.9609 6.86969 17.4375 3.66162 12.7656 3.66162H12.1875C7.51562 3.66162 4 6.86969 4 11.7422V16.8992C4 17.2701 4.26562 17.5201 4.61719 17.5201ZM7.38281 20.7713H8.46094C9.39062 20.7713 9.96094 20.2022 9.96094 19.219V15.1227C9.96094 14.1396 9.39062 13.5704 8.46094 13.5704H7.38281C6.875 13.5704 6.57031 13.8895 6.57031 14.4501V19.8917C6.57031 20.4523 6.875 20.7713 7.38281 20.7713ZM15 19.219C15 20.2022 15.5703 20.7713 16.5 20.7713H17.5781C18.0938 20.7713 18.4062 20.4523 18.4062 19.8917V14.4501C18.4062 13.8895 18.0938 13.5704 17.5781 13.5704H16.5C15.5703 13.5704 15 14.1396 15 15.1227V19.219Z"
            fill="currentColor"
          ></path>
        </svg>
      </div>
      <div class="collect">
        <svg
          v-if="!isCollection"
          @click="isshow"
          data-v-07814981=""
          data-v-1cbf7c4e=""
          fill="none"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
          class="svg-icon"
        >
          <path
            xmlns="http://www.w3.org/2000/svg"
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M12.336 5.52055C14.2336 3.62376 17.3096 3.62401 19.2069 5.52129C20.2067 6.52115 20.6796 7.85005 20.6259 9.15761C20.6151 12.2138 18.4184 14.8654 16.4892 16.6366C15.4926 17.5517 14.5004 18.2923 13.7593 18.8036C13.3879 19.0598 13.0771 19.2601 12.8574 19.3973C12.7475 19.466 12.6601 19.519 12.5992 19.5555C12.5687 19.5737 12.5448 19.5879 12.5279 19.5978L12.5079 19.6094L12.502 19.6129L12.5001 19.614C12.5001 19.614 12.4989 19.6147 11.9999 18.748C11.501 19.6147 11.5005 19.6144 11.5005 19.6144L11.4979 19.6129L11.4919 19.6094L11.472 19.5978C11.4551 19.5879 11.4312 19.5737 11.4007 19.5555C11.3397 19.519 11.2524 19.466 11.1425 19.3973C10.9227 19.2601 10.612 19.0598 10.2405 18.8036C9.49947 18.2923 8.50726 17.5517 7.51063 16.6366C5.58146 14.8654 3.38477 12.2139 3.37399 9.15765C3.32024 7.85008 3.79314 6.52117 4.79301 5.52129C6.69054 3.62376 9.76704 3.62376 11.6646 5.52129L11.9993 5.856L12.3353 5.52129L12.336 5.52055ZM11.9999 18.748L11.5005 19.6144L11.9999 19.9019L12.4989 19.6147L11.9999 18.748ZM11.9999 17.573C12.1727 17.462 12.384 17.3226 12.6236 17.1573C13.3125 16.6821 14.2267 15.9988 15.1366 15.1634C17.0157 13.4381 18.6259 11.2919 18.6259 9.13506V9.11213L18.627 9.08922C18.6626 8.31221 18.3844 7.52727 17.7926 6.9355C16.6762 5.81903 14.866 5.81902 13.7495 6.9355L13.7481 6.93689L11.9965 8.68166L10.2504 6.9355C9.13387 5.81903 7.3237 5.81903 6.20722 6.9355C5.61546 7.52727 5.33724 8.31221 5.3729 9.08922L5.37395 9.11213V9.13507C5.37395 11.2919 6.98418 13.4381 8.86325 15.1634C9.77312 15.9988 10.6874 16.6821 11.3762 17.1573C11.6159 17.3226 11.8271 17.462 11.9999 17.573Z"
            fill="currentColor"
          ></path>
        </svg>
        <svg
          v-else
          @click="isshow"
          data-v-07814981=""
          data-v-1cbf7c4e=""
          fill="none"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
          class="red svg-icon"
        >
          <path
            xmlns="http://www.w3.org/2000/svg"
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M19.2069 5.52129C17.3096 3.62401 14.2336 3.62376 12.336 5.52055L12.3353 5.52129L11.9993 5.856L11.6646 5.52129C9.76704 3.62376 6.69054 3.62376 4.79301 5.52129C3.79314 6.52117 3.32024 7.85008 3.37399 9.15765C3.38477 12.2139 5.58146 14.8654 7.51063 16.6366C8.50726 17.5517 9.49947 18.2923 10.2405 18.8036C10.612 19.0598 10.9227 19.2601 11.1425 19.3973C11.2524 19.466 11.3397 19.519 11.4007 19.5555C11.4312 19.5737 11.4551 19.5879 11.472 19.5978L11.4981 19.6129L11.9999 19.9019L12.5001 19.614L12.502 19.6129L12.5079 19.6094L12.5279 19.5978C12.5448 19.5879 12.5687 19.5737 12.5992 19.5555C12.6601 19.519 12.7475 19.466 12.8574 19.3973C13.0771 19.2601 13.3879 19.0598 13.7593 18.8036C14.5004 18.2923 15.4926 17.5517 16.4892 16.6366C18.4184 14.8654 20.6151 12.2138 20.6259 9.15761C20.6796 7.85005 20.2067 6.52115 19.2069 5.52129Z"
            fill="currentColor"
          ></path>
        </svg>
      </div>
      <div class="addCar" @click="addCar(goodsInfo)">加入购物车</div>
    </div>
    <transition name="van-slide-up">
         <div v-show="addToCar" class="collectionTip">已加入购物车</div>
    </transition>
  </div>
</template>

<script>
import Vue from "vue";
import {mapActions} from "vuex";
import { Swipe, SwipeItem} from "vant";
import axios from "axios";
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  components: {},
  data() {
    return {
      id: "",
      type: "",
      goodsInfo: "",
      priceDisplay: "",
      price: "",
      tags: "",
      specialPrice: "",
      regularPrice: "",
      isCollection: false,
      visible: false,
      unvisible: false,
      timer:null,
      addToCar:false
    };
  },
  //计算属性 依赖缓存,多对一(即多个影响一个),不支持异步
  computed: {},
  //监控data中的数据变化,不依赖缓存,一对多,支持异步
  watch: {},
  //方法集合
  methods: {
    isshow() {
      this.isCollection = !this.isCollection;
      this.visible = this.isCollection;
      this.unvisible = !this.isCollection;
      this.timer=setTimeout(()=>{
        this.visible =false;
        this.unvisible = false;
        clearTimeout(this.timer);
        this.timer=null;
      },500)
    },
    addCar(){
      if(this.goodsInfo===[]) return;
      this.$store.dispatch('asetItem',this.goodsInfo);
      this.addToCar=true;
      console.log(this.addToCar);
      this.timer=setTimeout(()=>{
        this.addToCar =false;
        clearTimeout(this.timer);
        this.timer=null;
      },500)
    },
    async loadGoodsInfo() {
      let goodsData = await axios.get(
        `/api-host/content/products/${this.id}?type=${this.type}`,
        {
          headers: {
            "x-client-platform": "MobileWeb",
          },
        }
      );
      console.log(goodsData.data);
      this.goodsInfo = goodsData.data;
      this.priceDisplay = this.goodsInfo.priceDisplay;
      this.tags = this.priceDisplay.tags;
      this.price = this.goodsInfo.price;
      this.specialPrice = this.price.specialPrice;
      this.regularPrice = this.price.regularPrice;
    },
    //这种方式无法处理当前实例
    // ...mapActions({addCar:'asetItem'})
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted() {
    this.id = this.$route.params.id;
    this.type = this.$route.query.type;
    await this.loadGoodsInfo();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='stylus' scoped>
.goodsInfo {
  position: relative;
  z-index: 9;
  height: 100vh;
  overflow-Y: scroll;
  background-color: #fff;
  padding-bottom .75rem
  .c-banner {
    width: 100%;
    height: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.19rem 0 0.3rem;
  }

  .cc-price {
    margin-top: 0.1rem;
    padding: 0.19rem;

    .lowerPrice {
      margin-bottom: 0.06rem;
      color: #E42312;
    }

    h3 {
      line-height: 0.16rem;
      color: #111;
      font-weight: 700;
      font-size: 0.12rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
    }

    .title {
      font-size: 0.18rem;
      padding: 0.05rem 0;
    }

    h4 {
      margin-top: 0.05rem;
      color: #666;
      opacity: 0.68;
      font-size: 0.12rem;
      line-height: 0.16rem;
      height: auto;
      word-break: break-word;
      white-space: normal;
      margin-bottom: 0.15rem;
      font-weight: normal;
    }

    .sallDate {
      h4 {
        margin-top: 0;
        line-height: 0.01rem;
      }
    }
  }

  .description {
    padding: 0.05rem 0.19rem;
    font-style: normal;
    font-weight: 400;
    font-size: 0.14rem;
    line-height: 0.24rem;
    color: #111;
    mix-blend-mode: normal;
    opacity: 0.8;
  }

  .g-serve {
    img {
      width: 100%;
    }
  }

  .goodsInfo-bottom {
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.19rem;
    height: 0.75rem;

    .server {
      padding: 0.05rem;
      margin-top .05rem
    }

    .collect {
      padding: 0.05rem;
      margin-top .05rem
      .red {
        color: red;
      }
    }

    .addCar {
      flex: 1;
      margin-left: 0.05rem;
      background-color: #0058a3;
      height: 0.5rem;
      line-height: 0.5rem;
      border-radius: 0.25rem;
      text-align: center;
      color: white;
    }
  }
  .collectionTip{
    position fixed
    bottom 2rem
    left calc(50% - .6rem)
    width 1.2rem
    height 0.36rem
    line-height .36rem
    text-align center
    background linear-gradient(#f9ecc0,#f5dfa0);
    opacity 1
    border: .01rem solid #dcba67;
    box-shadow: 0 1px 3px .16;
    color: #715821;
    border-radius: .08rem
  }
}
</style>
<style lang="stylus">
.my-swipe .van-swipe-item {
  color: #dadada;
  font-size: 20px;
  line-height: 150px;
  text-align: center;

  img {
    width: 100%;
  }
}

.van-swipe__indicators {
  width: 80%;
  display: flex;
  padding: 0.07rem 0;
  bottom: 0.02rem;

  .van-swipe__indicator {
    flex: 1;
    border-radius: 0.02rem;
    height: 0.03rem;
    margin: 0;
  }
}

.van-swipe__indicator--active {
  background-color: #111 !important;
}
</style>